import { Button, Card, Modal, Table, TableColumnsType } from "antd";
import { User } from "../../../Types/User";

interface UserInfoTableProps {
    dataSource: User[];
    total: number;
    pageSize?: number;
    onChangePage?: (page: number, pageSize: number) => void;
    onClickEdit?: (record: User) => void;
    onClickRemove?: (record: User) => void;
}

function UserInfoTable(props: UserInfoTableProps) {
    const columns: TableColumnsType<User> = [
        {
            title: "用户名",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "邮箱",
            dataIndex: "email",
            key: "email",
        },
        {
            title: "电话",
            dataIndex: "phone",
            key: "phone",
        },
        {
            title: "角色",
            dataIndex: "role",
            key: "role",
        },
        {
            title: "状态",
            dataIndex: "status",
            key: "status",
        },
        {
            title: "操作",
            key: "operation",
            render: (text, record) => (
                <>
                    <Button
                        type="link"
                        onClick={() =>
                            props.onClickEdit && props.onClickEdit(record)
                        }
                    >
                        编辑
                    </Button>
                    <Button
                        type="link"
                        danger
                        onClick={() => onClickRemoveButton(record)}
                    >
                        删除
                    </Button>
                </>
            ),
        },
    ];

    function onClickRemoveButton(record: User) {
        Modal.confirm({
            title: "确认删除",
            content: "确认删除该用户吗？",
            onOk: () => {
                if (props.onClickRemove) {
                    props.onClickRemove(record);
                }
            },
        });
    }
    return (
        <Card bordered={false}>
            <Table<User>
                size="small"
                columns={columns}
                dataSource={props.dataSource}
                rowKey={(record) => record.id.toString()}
                pagination={{
                    pageSize: props.pageSize,
                    showSizeChanger: true,
                    pageSizeOptions: ["10", "20", "30", "40"],
                    showTotal: () => `共${props.total}条`,
                    total: props.total,
                    onChange: (page, pageSize) => {
                        if (props.onChangePage) {
                            props.onChangePage(page, pageSize);
                        }
                    },
                }}
            ></Table>
        </Card>
    );
}
export default UserInfoTable;
